const app = new Vue({
    el:'#app',
    data:{
        books:[
            {
                id:1,
                name:'<<算法论导>>',
                date:'2006-09',
                price:89.00,
                number:1
            },
            {
                id:2,
                name:'<<SQL Server数据库>>',
                date:'2006-09',
                price:99,
                number:1
            },
            {
                id:3,
                name:'<<Python>>',
                date:'2006-09',
                price:25,
                number:1
            },{
                id:4,
                name:'<<Java>>',
                date:'2006-09',
                price:76,
                number:1
            },{
                id:5,
                name:'<<JavaScript艺术>>',
                date:'2006-09',
                price:87,
                number:1
            }
        ]
    },
    methods: {
        increment(index){
            this.books[index].number++;
        },
        decrement(index){
            //小于等于1的时候让按钮失效
            //this.books[index].number <= 1 ? null : this.books[index].number--
            this.books[index].number--;
        },
        delBook(index){
            //点击移除按钮,删除书籍
            this.books.splice(index,1);
        }
    },
    computed:{
        count(){
            return this.books.reduce((pre,curr)=>{
                return pre+curr.price*curr.number;
            },0);
        }
    },
    filters:{
        showPrice(price){
            return '$' + price.toFixed(2);
        }
    }
});